• NodeList 與 HTMLCollection 的主要差異點是節點的類型不一樣：
  • NodeList:包含多種節點，如：元素節點、文字節點、屬性節點、註解節點等節點。
  • HTMLCollection:只包含元素節點。
• 相同點：
  • 都有 .length 屬性可計算長度。
  • 都是類陣列。

NodeList:

是節點(node)的集合，長的很像陣列，但實質上不是陣列。
NodeList可以使用的方法可參考mdn NodeList。

節點:

就是 DOM [註1] 裡面的各個物件，主要有以下幾種類型：

• 元素節點:HTML 的標籤。
• 文字節點:標籤內的文字內容。
• 屬性節點:標籤內的屬性。
• 註解節點:我們平常用 Ctrl + / 做的註解。

其他節點可參考:mdn Node.nodeType

註1：DOM 是用來把 HTML 文件的標籤變成物件，且存取後拿來使用。

回傳值:

透過 Node.childNodes 跟 document.querySelectorAll()會根據被選取到的對象有哪些節點，回傳對象的 NodeList，也就是回傳對象的節點。

• Node.childNodes:回傳目標對象的動態(live)[註1]子層節點，包括元素節點、文字節點及註解節點。
• document.querySelectorAll():依據選取器選到的節點回傳靜態(static)[註2]節點，除了元素節點、文字節點、註解節點也包括屬性節點及其他節點。

註1：動態代表除了原本 HTML 內有的節點外，如果有使用到 JS 去新增或刪除節點，也會同步抓取。
註2：靜態代表只會抓到原本 HTML 內有的節點。

HTMLCollection:

是元素(elements)的集合，類似 arguments 物件的樣子。
HTMLCollection可以使用的方法可參考mdn HTMLCollection。

透過 getElementsByClassName() 跟 getElementsByTagName()會根據被選取到的對象有哪些元素節點，回傳對象的 HTMLCollection。

參考：
[1]重新認識 JavaScript: Day 12 透過 DOM API 查找節點
[2]mdn NodeList
[3]mdn Node.nodeType
[4]mdn HTMLCollection